<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 398px;
        }
        
        .box-img {
            position: relative;
            height: 398px;
            border: 1px solid #ccc;
            cursor: move;
        }
        
        .mask {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 300px;
            background: #FEDE4F;
            opacity: .5;
            border: 1px solid #ccc;
        }
        
        .big {
            display: none;
            position: absolute;
            left: 410px;
            top: 0;
            width: 500px;
            height: 500px;
            background-color: pink;
            z-index: 999;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        
        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-img">
            <img src="../第五天/05-京东放大镜效果/upload/s3.png" alt="">
            <div class="mask"></div>
            <div class="big">
                <img src="../第五天/05-京东放大镜效果/upload/big.jpg" alt="" class="bigImg">
            </div>
        </div>
    </div>
    <script>
        //当页面加载完毕再执行js代码
        window.addEventListener("load", function() {
            var box = document.querySelector(".box");
            var mask = document.querySelector(".mask");
            var big = document.querySelector(".big");
            //鼠标经过
            box.addEventListener("mouseover", function() {
                    mask.style.display = "block";
                    big.style.display = "block";
                })
                //鼠标离开
            box.addEventListener("mouseout", function() {
                mask.style.display = "none";
                big.style.display = "none";
            })
            box.addEventListener("mousemove", function(e) {
                //鼠标在盒子内的坐标
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                //坐标给移动盒子
                //mask移动的距离
                var hight = mask.offsetWidth / 2;
                var maskX = x - hight;
                var maskY = y - hight;
                if (maskX <= 0) {
                    maskX = 0;
                } else if (maskX >= box.offsetWidth - mask.offsetWidth) {
                    maskX = box.offsetWidth - mask.offsetWidth;
                }
                if (maskY <= 0) {
                    maskY = 0;
                } else if (maskY >= box.offsetHeight - mask.offsetHeight) {
                    maskY = box.offsetHeight - mask.offsetHeight;
                }
                mask.style.left = maskX + "px";
                mask.style.top = maskY + "px";
                //大图片的移动距离=遮挡层移动的距离*大图片最大移动距离/遮挡层最大移动距离
                var bigImg = document.querySelector(".bigImg");
                var maskMax = box.offsetWidth - mask.offsetWidth;
                var bigMax = big.offsetWidth - bigImg.offsetWidth;
                var bigX = maskX * bigMax / maskMax;
                var bigY = maskY * bigMax / maskMax;
                bigImg.style.left = bigX + "px";
                bigImg.style.top = bigY + "px";
            })
        })
    </script>
</body>

</html>